<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入 elementUI 样式 -->
  <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
  <!-- 引入 vue 的js文件： elementUI基于Vue开发，必须在elementUI的js文件之前引入 -->
  <script src="../js/vue.js"></script>
  <!-- 引入elementUI 组件库 -->
  <script src="../js/element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
  {{message}}
  <el-table :data="tableData" stripe>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center">
      <!--
      slot-scope：作用域插槽，可以获取表格数据
        scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
      -->
      <template slot-scope="currData">
        <el-button type="primary" size="mini" @click="handleUpdate(currData.row)">编辑</el-button>
        <el-button type="danger" size="mini"  @click="handleDelete(currData.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @current-change="handleCurrentChange"
      :current-page="5"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="305">
  </el-pagination>
</div>
</body>

<script>
  new Vue({
    el: '#app',
    data:{
      message:"学习分页插件使用",
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    },
    methods:{
      handleUpdate(row){
        console.log(row.name);
      },
      handleDelete(row){
        console.log(row.date);
      },
      handleCurrentChange(page){
        console.log(page);
      }
    }
  })
</script>
</html>